<template>
  <div class="sys-main-content">
    <el-row>
      <el-col :span="24">
        <div class="col-content">
          <div class="sys-search">
            <el-button type="primary" @click="addTheme">新增</el-button>
          </div>
          <div class="sys-conent">
            <el-divider content-position="left">主题列表</el-divider>
            <el-row :gutter="20" style="margin-bottom: 20px;">
              <el-col
                v-for="(theme, index) in themeList"
                :key="index"
                :span="4"
              >
                <div class="layout" @click="setTheme(theme)" @contextmenu.prevent="showMenu($event, theme)">
                  <el-container>
                    <el-header :style="{ background: theme.backgroundColor }"></el-header>
                    <el-container>
                      <el-aside width="30px" :style="{ background: theme.asideBackgroundColor }"></el-aside>
                      <el-main>{{ theme.sysName }}</el-main>
                    </el-container>
                  </el-container>
                  <div v-if="theme.defaultStatus === 1" class="modal-check">
                    <i class="el-icon-check"></i>
                  </div>
                  <div v-else class="modal">
                    <i class="el-icon-view"></i>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      :title="isEdit ? '编辑主题' : '新增主题'"
      :visible.sync="themeDrawer"
      direction="rtl"
      :wrapper-closable="false"
      :before-close="cloesDrawer"
    >
      <add-or-updata-theme
        ref="themeDrawer"
        :theme-params="themeParams"
        @researchThemeList="researchThemeList"
      />
    </el-drawer>
    <ul v-show="menuShow" id="contextmenu">
      <li @click="editTheme"><span>编辑</span><i class="el-icon-edit-outline"></i></li>
      <li v-show="themeParams.defaultStatus !== 1" @click="removeTheme"><span>删除</span><i class="el-icon-delete"></i></li>
    </ul>
  </div>
</template>

<script>
import { getThemePageList, updateCurrentUserTheme, getUserTheme, removeThemeById } from '@/api/theme'
import addOrUpdataTheme from './addOrUpdataTheme.vue'
import _ from 'lodash'
export default {
  name: 'Theme',
  components: {
    addOrUpdataTheme
  },
  data() {
    return {
      themeList: [],
      themeParams: {},
      themeDrawer: false,
      isEdit: false, // 是否为编辑页
      menuShow: false
    }
  },
  created() {
    this.initThemParams()
    this.getThemePageList()
    this.themeParams.userId = this.$store.state.user.userId
    window.addEventListener('click', () => {
      this.menuShow = false
    }, false)
  },
  methods: {
    // 初始化/重置参数
    initThemParams() {
      this.themeParams = {
        asideActiveColor: '#ffd04b',
        asideBackgroundColor: '#171717',
        asideTextColor: '#fff',
        backgroundColor: '#545c64',
        backgroundImage: '',
        backgroundType: 0,
        id: '',
        name: '默认主题',
        remark: '',
        sysName: '后台管理系统',
        sysVersion: 'v1.0.0',
        textColor: '#fff',
        userId: ''
      }
    },
    // 查询主题列表
    getThemePageList() {
      const params = {
        current: 1,
        size: 1000
      }
      getThemePageList(params).then(res => {
        this.themeList = res.list
      })
    },
    // 新增主题
    addTheme() {
      this.isEdit = false
      this.themeDrawer = true
    },
    // 新增/修改后重新查询
    researchThemeList() {
      if (this.isEdit) {
        // 如果是编辑状态，重置store中数据
        getUserTheme().then(res => {
          this.$store.dispatch('layout/changeLayoutStyle', res)
        })
      }
      this.themeDrawer = false
      this.getThemePageList()
      this.initThemParams()
    },
    // 关闭抽屉
    cloesDrawer() {
      this.$refs['themeDrawer'].$refs['theme'].resetFields()
      this.themeDrawer = false
    },
    // 设置主题
    setTheme(theme) {
      updateCurrentUserTheme(theme.id).then(res => {
        this.$store.dispatch('layout/changeLayoutStyle', theme)
        this.getThemePageList()
      })
    },
    // 编辑主题
    editTheme() {
      this.menuShow = false
      this.isEdit = true
      this.themeDrawer = true
    },
    // 删除主题
    removeTheme() {
      this.$confirm('此操作将永久删除该主题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeThemeById(this.themeParams.id).then(res => {
          console.log(res)
          this.menuShow = false
          this.getThemePageList()
        })
      }).catch(() => {})
    },
    // 样式右键菜单
    showMenu($event, theme) {
      // 编辑/删除的主题
      this.themeParams = _.cloneDeep(theme)
      this.menuShow = true
      this.$nextTick(() => {
        const contextmenu = document.getElementById('contextmenu')
        contextmenu.style.left = $event.x + 'px'
        contextmenu.style.top = $event.y + 'px'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.layout {
  position: relative;
  cursor: pointer;
  .el-header {
    height: 30px !important;
    background-color: #B3C0D1;
    line-height: 30px;
  }
  .el-aside {
    height: 100px;
    background-color: #D3DCE6;
    line-height: 100px;
  }
  .el-main {
    height: 100px !important;
    background-color: #f6f7fb;
    text-align: center;
    line-height: 100px;
  }
  .modal, .modal-check {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba($color: #000000, $alpha: .3);
    text-align: center;
    i {
      font-size: 64px;
      color: #fff;
      line-height: 130px;
    }
    &.modal {
      display: none;
    }
  }
  &:hover {
    .modal {
      display: block;
    }
  }
}
#contextmenu {
  position: absolute;
  border: 1px solid #e6e6e6;
  list-style-position: inside;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 3px;
  background: #fff;
  li {
    padding: 5px 10px;
    width: 100px;
    display: flex;
    justify-content: space-between;
    &:hover {
      background: #B3C0D1;
      cursor: pointer;
    }
  }
}
.el-row {
  height: calc(100vh - 180px);
  .el-col {
    height: 100%;
  }
}
.col-content {
  height: calc(100vh - 100px)
}
</style>
